<template>
	<view class="g-condition">
		<u-overlay :show="overlayShow" @click="overlatClick"></u-overlay>
		<view class="g-condition-box">
			<view class="g-condition-item" v-for="(item,index) in options" :key="index"
				:class="activeIndex == index || item.isChange?'activeItem':''" @tap="handleItem(item,index)">
				<span>{{item.title}}</span>
				<image src="../../static/img/sldown.png" mode="" v-if="activeIndex == index"></image>
				<image src="../../static/img/sldown.png" mode="" v-else-if="activeIndex != index && item.isChange"
					class="remoteImg"></image>
				<image src="../../static/img/aldown.png" mode="" v-else></image>
			</view>

			<view class="g-condition-main" v-if="showMain">
				<scroll-view scroll-y="true" style="height: 700rpx;" v-if="selectItem.type == 'check'">
					<u-checkbox-group v-model="vsData" iconPlacement="right" placement="column" borderBottom
						shape="circle" labelColor="#333">
						<u-checkbox v-for="(checkItem,checkIndex) in selectItem.data" :key="checkIndex"
							activeColor="#f43107" :label="checkItem.label" :name="checkItem.id"></u-checkbox>
					</u-checkbox-group>
				</scroll-view>
				<picker-view v-else-if="selectItem.type == 'area'" :value="vsData" @change="areaChange"
					class="picker-view" :indicator-style="indicatorStyle">
					<picker-view-column>
						<view class="item" v-for="(item,index) in provinceArr" :key="index">{{item.label}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in cityArr" :key="index">{{item.label}}</view>
					</picker-view-column>
				</picker-view>
				<view class="" v-else-if="selectItem.type == 'more'">
					<slot name="more"></slot>
				</view>
				<view class="g-condition-opa" v-if="selectItem.type != 'more'">
					<view class="g-condition-opa_reset" @tap="reset">
						重置
					</view>
					<view class="g-condition-opa_confirm" @tap="confirm">
						确定
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import areaData from '../../static/json/area.json'
	import {
		convertToTreeArray_
	} from '@/utils/tools.js'
	export default {
		name: "g-condition",
		props: {
			options: {
				type: Array,
				default: () => {
					return []
				}
			},
			form: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				activeIndex: -1,
				showMain: false,
				selectItem: null,
				vsData: [],
				realVsData:[],
				provinceArr: [],
				cityArr: [],
				indicatorStyle: `height: 50px;`,
				overlayShow:false,
			};
		},
		watch: {
			options: {
				handler(newVal) {
					console.log('更新', newVal);
				}
			}
		},
		methods: {
			overlatClick(){
				this.closeMain()
			},
			areaChange(e) {
				let sePro = this.provinceArr[e.detail.value[0]]
				this.cityArr = sePro.children
				this.vsData = e.detail.value
			},
			closeMain() {
				this.activeIndex = -1
				this.showMain = false
				this.selectItem = null
				this.overlayShow = false
			},
			handleItem(item, index) {
				if (this.activeIndex == index) {
					this.closeMain()
				} else {
					this.activeIndex = index
					this.showMain = true
					this.overlayShow = true
					this.selectItem = item
					if (item.type == 'check') {
						this.realVsData = this.form[item.value]
						this.vsData =  JSON.parse(JSON.stringify(this.realVsData))
					} else if (item.type == 'area') {
						if (!this.form[item.value].length == 0) { //非首次进入
							let pIndex = this.provinceArr.findIndex(e => e.value == this.form[item.value][0])
							let cIndex = this.cityArr.findIndex(e => e.value == this.form[item.value][1])
							cIndex = cIndex == -1 ? 0 : cIndex
							this.realVsData = [pIndex, cIndex]
							this.vsData =  JSON.parse(JSON.stringify(this.realVsData))
						}
					} else if(item.type == 'more'){
						this.$emit('handleMore')
					}
				}
			},
			confirm() {
				this.realVsData = JSON.parse(JSON.stringify(this.vsData))
				let data = {
					key: this.selectItem.value,
					value: this.realVsData,
					isChange: false,
					index: this.activeIndex
				}
				switch (this.options[this.activeIndex].type) {
					case 'check':
						if (data.value.length != 0) {
							data.isChange = true
						}
						break;
					case 'area':
						if (data.value[0] != 0) {
							data.isChange = true
						}
						if (this.cityArr.length == 0) {
							data.value = [this.provinceArr[this.realVsData[0]].value, '']
						} else {
							data.value = [this.provinceArr[this.realVsData[0]].value, this.cityArr[this.realVsData[1]].value]
						}
						break;
				}
				this.$emit('confirm', data)
				this.closeMain()
			},
			reset() {
				switch (this.options[this.activeIndex].type) {
					case 'check':
						this.vsData = []
						break;
					case 'area':
						this.cityArr = []
						this.vsData = [0, 0]
						break;
				}
			}
		},
		mounted() {
			// console.log(convertToTreeArray_(areaData)[0].children);
			this.provinceArr = convertToTreeArray_(areaData)[0].children
		}
	}
</script>

<style lang="scss" scoped>
	.g-condition {

		.remoteImg {
			transform: rotate(180deg)
		}

		.g-condition-box {
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			position: relative;
			z-index: 10071;
		}

		.g-condition-main {
			border-top: 1rpx solid #DDDDDD;
			position: absolute;
			background-color: #fff;
			width: 750rpx;
			left: 0;
			top: 88rpx;

			.picker-view {
				width: 750rpx;
				height: 600rpx;
				margin-top: 20rpx;
			}

			.item {
				line-height: 100rpx;
				text-align: center;
			}

			.g-condition-opa {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.g-condition-opa_reset,
				.g-condition-opa_confirm {
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
					width: 374.5rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #F43107;
				}

				.g-condition-opa_reset {
					color: #A9B1BE;
				}
			}
		}


		.g-condition-item {
			display: flex;
			align-items: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #304156;
			height: 88rpx;

			image {
				width: 20rpx;
				height: 12rpx;
				margin-left: 10rpx;
			}
		}

		.activeItem {
			color: #F43107;
		}
	}
</style>